<script setup lang="ts">
import {useRoleViewStore} from "@/store/views/sys/admin/roleStore";
import AllotMenu from "@/views/sys/admin/role/menu-tree/allot-menu.vue";
import AllotUser from "@/views/sys/admin/role/menu-tree/allot-user.vue";
import {editRoleMenuTreeApi} from "@/api/sys/admin/role";
import {useUserViewStore} from "@/store/views/sys/admin/userStore";

const store = useRoleViewStore()
const {menuTreeVisible, displayRole, selectedRoleId, treeRef} = storeToRefs(store)
const loading = ref(false)
const userStore = useUserViewStore()


function closeDialog() {
  menuTreeVisible.value = false
  const {queryData} = storeToRefs(userStore)
  queryData.value.query = {}
}

async function submitMenu() {
  const leafKeys = <number[]>treeRef.value!.getCheckedKeys(false)
  const halfKeys = <number[]>treeRef.value!.getHalfCheckedKeys()
  const menuIds = [...halfKeys, ...leafKeys]
  console.log('选中的菜单ids', menuIds)
  await editRoleMenuTreeApi(selectedRoleId.value, menuIds)
  ElMessage.success('分配菜单成功')
  menuTreeVisible.value = false
}
</script>

<template>
  <el-dialog class="my-dialog" draggable v-model="menuTreeVisible"
             :title="'配置角色:'+displayRole.name"
             fullscreen
             @close="closeDialog"
             destroy-on-close>
    <div class="flex">
      <allot-menu/>
      <allot-user :role-id="displayRole.id"/>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" :loading="loading" @click="submitMenu">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>

</style>